<template>
  <svg-icon :icon="icon"
            @click="onToggle"></svg-icon>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import screenfull from 'screenfull'

const isFullScreen = ref(false);

const icon = computed(() => isFullScreen.value ? 'exit-fullscreen' : 'fullscreen');

const onToggle = () => {
  screenfull.toggle();
}

const change = () => {
  isFullScreen.value = !isFullScreen.value;
}

// 挂载事件
onMounted(() => {
  screenfull.on("change", change);
})

// 解绑事件
onUnmounted(() => {
  screenfull.off("change", change);
})

</script>

<style>
</style>